<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>task 7</title>
	<link rel="stylesheet" type="text/css" href="css/task7.css">
</head>
<body>
	<!-- 头部导航条 -->
	<div class="headCon container">
		<div class="fl"><div class="icon"></div>新世界</div>
		<div class="fr">
			<ul>                            
				<li class="active"><a href="#">首页</a></li>
				<li><a href="#">最新活动</a></li>
				<li><a href="#">项目介绍</a></li>
				<li><a href="#">爱心社区</a></li>
				<li><a href="#">关于我们</a></li>
			</ul>
			<div class="login">
				<div class="icon"></div>
				登录
			</div>
		</div>
	</div>
	<!-- banner 1 -->
	<div class="bannerA container">
		<div class="title">Time of new life</div>
		<div class="slogan">
			<p>新时代，年轻的人们让我们一起</p>
			<p>体验新生活，享受新生活</p>
		</div>
		<div class="button">开始体验</div>
	</div>
	<!-- banner 2 -->
	<div class="bannerB container">
		<ul>
			<li>
				<div class="listA icon"></div>
				<p>打造全新世界观，让你更 </p>
				<p>爱你的生活</p>
			</li>
			<li>
				<div class="listB icon"></div>
				<p>丰富多彩的公益活动，发  </p>
				<p>挥新世界的主人公意识</p>
			</li>
			<li>
				<div class="listC icon"></div>
				<p>时尚的新理念，超前体验</p>
				<p>未知的生活</p>
			</li>
			<li class="last">
				<div class="listD icon"></div>
				<p>完善的培养机制，培养你</p>
				<p>全新的世界观</p>
			</li>
		</ul> 
	</div>
	<!-- banner 3 -->
	<div class="bannerC container">
		<div class="icon"></div>
		<p>关于新世界，你不知道的还有什么？</p>
	</div>
	<!-- banner 4 -->
	<div class="bannerD container">
		<p class="slogan">查找新世界城市活动信息</p>
		<span class="shortLine"></span>
		<p class="intro">每个城市的有不同的活动信息，请自主查询您所需要了解的城市</p>
		<form method="POST" action="#">
			<ul>
				<li class="inner">中国</li>
				<li class="downArrow"></li>
			</ul>
			<ul class="active">    
				<li class="inner">省份</li>
				<li class="active">北京市</li>
				<li>天津市</li>
				<li>河北省</li>
				<li>陕西省</li>
				<li>内蒙古自治区</li>
				<li>辽宁省</li>
				<li class="downArrow"></li>
			</ul>
			<ul>
				<li class="inner">城市</li>
				<li class="downArrow"></li>
			</ul>
			<input class="button" type="submit" name="country" value="搜索">
		</form>
	</div>
	<!-- banner 5 -->
	<div class="bannerE container">
		<ul>
			<li>
				<div class="listA icon"></div>
				<p class="title">北京活动</p>
				<p>新社区大联盟 </p>
			</li>
			<li>
				<p class="title bold">上&nbsp;&nbsp;&nbsp;&nbsp;海&nbsp;&nbsp;&nbsp;&nbsp;活&nbsp;&nbsp;&nbsp;&nbsp;动</p>
				<p>夜上海新景观探索</p>
				<div class="listB icon"></div>
			</li>
			<li>
				<div class="listC icon"></div>
				<p class="title">深圳活动</p>
				<p>全新海岸线观点站</p>
			</li>
			<li>
				<div class="listD icon"></div>
				<p class="title">香港活动</p>
				<p>奢侈消费大派送</p>
			</li>
		</ul> 
	</div>
	<!-- banner 6 -->
	<div class="bannerF container">
		<div class="fl"></div>
		<div class="fr">
			<div class="title"></div>			
			<p>新世界是个新世界新世界是个新世界新世界是个新世界</p>
			<p>新世界是个新世界新世界是个新世界新世界是个新世界</p>
			<p>新世界是个新世界新世界是个新世界新世界是个新世界</p>
			<p>新世界是个新世界新世界是个新世界</p>
			<div class="button">更多详情</div>
			<ul>
				<li class="active"></li>
				<li></li>
				<li class="last"></li>
			</ul>
		</div>
	</div>
	<!-- banner 7 -->
	<div class="bannerG container">
		<ul>
			<li class="bkRed">
				<p>新时代</p>
				<p>关于爱生活的我们</p>
				<span class="shortLine"></span>
				<div class="button">查看更多</div>
			</li>
			<li class="bkWhite">
				<p>新时代</p>
				<p>关于爱生活的我们</p>
				<span class="shortLine"></span>
				<div class="button">查看更多</div>
			</li>
			<li class="bkPic"></li>
		</ul>
	</div>
	<!-- banner 8 -->
	<div class="bannerH container">
		<div class="header">
			<p class="title">成为我们的志愿者</p>
			<span class="shortLine"></span>
			<p>新世界的大家庭需要每一个爱生活的人的加入，如果你够年轻，有梦想，有激情 </p>
			<p>那就不要犹豫，快来加入我们，成为改变所有人生活的人</p>
		</div>
		<div class="fl">
			<div class="item">
				<p class="title">新世界志愿者协议</p>
				<p>加入新世界志愿者的人员必须遵守中华人民共共和国的</p>
				<p>相关法律法规，并且本着平等资源的原则 ......</p>
				<a href="#"><i></i>more</a>
			</div>
			<div class="item">
				<p class="title">新世界志愿者权利</p>
				<p>加入新世界志愿者的人员必须遵守中华人民共共和国的</p>
				<p>相关法律法规，并且本着平等资源的原则 ......</p>
				<a href="#"><i></i>more</a>
			</div>
			<div class="item">
				<p class="title">更多条款</p>
				<a href="#"><i></i>more</a>
			</div>
		</div>
		<div class="fr">
			<form action="#" method="POST">
				<input class="inputTxt" type="text" name="q1" placeholder="姓名：">
				<input class="inputTxt" type="text" name="q2" placeholder="年龄：">
				<input class="inputTxt" type="text" name="q3" placeholder="联系方式：">
				<input class="inputTxt" type="text" name="q4" placeholder="联系地址：">
				<textarea class="inputTxt" name="q5" placeholder="请简单描述您梦想的生活："></textarea>
				<input class="button" type="submit" name="q6" value="提交申请">
			</form>
		</div>
	</div>
	<!-- 底部导航条 -->
	<footer class="container">
		<div class="contact">
			<form action="#" method="POST">
				<p class="title">联系我们</p>
				<p>为了更好的获取我们最新的产品资讯，您可以留下您的电子邮箱快速订阅我们的</p>
				<p>产品资讯 也可以通过以下任何方式关注我们动态</p>
				<input class="inputTxt" type="text" name="email" placeholder="someone@email.com">
				<input class="button" type="submit" value="提交">
				<ul>
					<li class="QQ"></li>
					<li class="weibo"></li>
					<li class="twitter"></li>
					<li class="lnk last"></li>
				</ul>
			</form>
		</div>
		<div class="fixBot">
			<p class="fl">&copy;2016新世界</p>
			<a class="fr" href="#">Back to top</a>
		</div>
	</footer>
</body>
</html>